<template>
  <div class="app-container">
    <el-card class="survey-preview">
      <div slot="header">
        <span>问卷预览</span>
        <el-button style="float: right; margin-left: 10px" type="primary" @click="goBack">返回</el-button>
      </div>
      
      <div class="survey-header">
        <h2 class="survey-title">{{ survey.title }}</h2>
        <p class="survey-description">{{ survey.description }}</p>
        <div class="survey-info">
          <span>截止日期: {{ survey.endTime }}</span>
          <span>答题时长: 约5分钟</span>
        </div>
      </div>
      
      <el-divider></el-divider>
      
      <div class="survey-body">
        <div v-for="(question, index) in survey.questions" :key="index" class="question-item">
          <div class="question-title">
            <span class="question-index">Q{{ index + 1 }}</span>
            <span class="question-text">{{ question.title }}</span>
            <span v-if="question.required" class="question-required">*</span>
          </div>
          
          <div class="question-options">
            <!-- 单选题 -->
            <template v-if="question.type === 'radio'">
              <el-radio-group v-model="answers[index]">
                <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option-item">
                  <el-radio :label="option.value">{{ option.label }}</el-radio>
                </div>
              </el-radio-group>
            </template>
            
            <!-- 多选题 -->
            <template v-else-if="question.type === 'checkbox'">
              <el-checkbox-group v-model="answers[index]">
                <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option-item">
                  <el-checkbox :label="option.value">{{ option.label }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </template>
            
            <!-- 填空题 -->
            <template v-else-if="question.type === 'text'">
              <el-input 
                v-model="answers[index]" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入您的答案"
              ></el-input>
            </template>
            
            <!-- 评分题 -->
            <template v-else-if="question.type === 'rate'">
              <el-rate 
                v-model="answers[index]" 
                :max="question.max || 5" 
                :texts="question.texts || ['很差', '较差', '一般', '较好', '很好']"
                show-text
              ></el-rate>
            </template>
          </div>
        </div>
      </div>
      
      <div class="survey-footer">
        <el-button type="primary" @click="submitSurvey">提交问卷</el-button>
        <el-button @click="resetAnswers">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SurveyPreview",
  data() {
    return {
      surveyId: null,
      survey: {
        title: "员工满意度调查问卷",
        description: "为了更好地了解员工对公司各方面的满意度，提升公司管理和服务水平，特开展本次调查。您的意见对我们非常重要，感谢您的参与！",
        endTime: "2023-03-15 23:59:59",
        questions: [
          {
            title: "您对公司工作环境的满意度是？",
            type: "radio",
            required: true,
            options: [
              { label: "非常满意", value: "5" },
              { label: "比较满意", value: "4" },
              { label: "一般", value: "3" },
              { label: "不太满意", value: "2" },
              { label: "非常不满意", value: "1" }
            ]
          },
          {
            title: "您认为公司需要改善的方面有哪些？（多选）",
            type: "checkbox",
            required: true,
            options: [
              { label: "工作环境", value: "environment" },
              { label: "薪资福利", value: "salary" },
              { label: "培训发展", value: "training" },
              { label: "团队氛围", value: "team" },
              { label: "管理制度", value: "management" },
              { label: "其他", value: "other" }
            ]
          },
          {
            title: "请对公司的管理制度进行评分",
            type: "rate",
            required: true,
            max: 5
          },
          {
            title: "请描述您对公司未来发展的建议",
            type: "text",
            required: false
          }
        ]
      },
      answers: []
    };
  },
  created() {
    this.surveyId = this.$route.params.id;
    // 这里应该调用后端接口获取问卷数据，暂时使用模拟数据
    this.resetAnswers();
  },
  methods: {
    goBack() {
      this.$router.push("/system/survey");
    },
    resetAnswers() {
      // 根据问题类型初始化答案数组
      this.answers = this.survey.questions.map(question => {
        if (question.type === 'checkbox') {
          return [];
        } else if (question.type === 'rate') {
          return 0;
        } else {
          return '';
        }
      });
    },
    submitSurvey() {
      // 验证必填项
      let valid = true;
      let firstInvalidIndex = -1;
      
      this.survey.questions.forEach((question, index) => {
        if (question.required) {
          if (
            (question.type === 'checkbox' && this.answers[index].length === 0) ||
            (question.type !== 'checkbox' && !this.answers[index] && this.answers[index] !== 0)
          ) {
            valid = false;
            if (firstInvalidIndex === -1) {
              firstInvalidIndex = index;
            }
          }
        }
      });
      
      if (!valid) {
        this.$message.error("请完成所有必填题目");
        // 滚动到第一个未填写的问题
        if (firstInvalidIndex !== -1) {
          const element = document.querySelectorAll('.question-item')[firstInvalidIndex];
          if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
          }
        }
        return;
      }
      
      // 提交问卷
      this.$message.success("问卷提交成功，感谢您的参与！");
      setTimeout(() => {
        this.goBack();
      }, 1500);
    }
  }
};
</script>

<style lang="scss" scoped>
.survey-preview {
  .survey-header {
    text-align: center;
    margin-bottom: 20px;
    
    .survey-title {
      font-size: 22px;
      margin-bottom: 10px;
    }
    
    .survey-description {
      color: #606266;
      margin-bottom: 15px;
    }
    
    .survey-info {
      color: #909399;
      font-size: 14px;
      
      span {
        margin-right: 15px;
      }
    }
  }
  
  .survey-body {
    .question-item {
      margin-bottom: 25px;
      border: 1px solid #EBEEF5;
      border-radius: 4px;
      padding: 15px;
      
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      
      .question-title {
        margin-bottom: 15px;
        font-size: 16px;
        
        .question-index {
          color: #409EFF;
          font-weight: bold;
          margin-right: 8px;
        }
        
        .question-required {
          color: #F56C6C;
          margin-left: 4px;
        }
      }
      
      .question-options {
        padding-left: 25px;
        
        .option-item {
          margin-bottom: 10px;
        }
      }
    }
  }
  
  .survey-footer {
    text-align: center;
    margin-top: 30px;
  }
}
</style> 